<template>
  <div class="bg-white px-4 top-0 left-0 z-[10] fixed md:relative">
    <div class="max-w-[1200px] mx-auto">
      <div class="header flex items-center justify-between">
        <div class="flex items-center" style="padding: 12px 0">
          <img src="https://static.huicanzhan.cn/common/sponsor/logo@2x.png" class="logo" @click="toHome" />
        </div>

        <div class="hidden md:flex justify-self-end items-center gap-x-2 md:gap-x-5 lg:gap-x-10">
          <div class="btn" :class="{ active: route.path == '/' }" @click="toHome">首页</div>
          <n-dropdown trigger="hover" @select="handleSelect" :options="options">
            <div class="btn" :class="{ active: prodWhite.includes(route.path) }">产品及服务</div>
          </n-dropdown>
          <n-dropdown trigger="hover" @select="handleSelect" :options="optSolutions">
            <div class="btn" :class="{ active: route.path == '/solution' || route.path == '/marketing' }">解决方案</div>
          </n-dropdown>
          <div class="btn" :class="{ active: route.path == '/price' }" @click="toNext('/price')">价格</div>
          <div class="btn" :class="{ active: route.path == '/case' }" @click="toNext('/case')">案例</div>
          <div class="btn" :class="{ active: route.path == '/service' }" @click="toNext('/service')">服务商</div>
          <div class="btn login" @click="toSponsor">登录/注册</div>
          <div @click="handleRelease" class="release">
            免费发布
            <img src="https://static.huicanzhan.cn/common/sponsor/fly.png" />
          </div>
        </div>
        <div class="md:hidden flex items-center gap-x-4">
          <!-- <div class=" flex bg-blue-500 text-white gap-x-4 items-center p-4">
          免费发布
          <img src="https://static.huicanzhan.cn/common/sponsor/fly.png" />
        </div>-->
          <div>
            <!-- <n-button type="primary" ghost @click="() => h5MenuRef.open()">
            <template #icon>

            </template>
</n-button>-->
            <button class="menu_btn" @click="() => h5MenuRef?.open()"></button>
            <!-- <n-icon size="40" color="#1e40af" :component="ReorderThreeOutline" /> -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <H5Menu ref="h5MenuRef" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { ReorderThreeOutline } from '@vicons/ionicons5';
import H5Menu from './H5Menu.vue';
const { data } = await useFetch('/api/foo');
import { options, optSolutions, useMenuLink } from './menuOptions';
const h5MenuRef = ref<InstanceType<typeof H5Menu>>();
const { toHome, handleRelease, toSponsor, toNext, handleSelect } = useMenuLink();
const props = defineProps({
  showCity: {
    type: Boolean,
    default: true,
  },
  auto: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['search']);

const route = useRoute();


const prodWhite = ['/signin', '/exhibitor', '/exhibition'];


</script>
<style lang="less" scoped>
.menu_btn {
  @apply w-7 h-7 bg-no-repeat bg-contain mt-1;
  background-image: url('@/assets/images/index/菜单.png');
}

.fixed {
  top: 0;
  z-index: 15;
}

.bg-white {
  width: 100%;
  // border-bottom: 1px solid #f9f9f9;
}

.logo {
  height: 36px;
  cursor: pointer;
}

.search-box {
  width: 430px;
  margin-left: 10px;
}

.btn {
  font-size: 14px;
  color: #191919;
  font-weight: bold;

  &.active {
    color: #0e57d6;
  }

  &:hover {
    color: #0e57d6;
    cursor: pointer;
  }

  &:last-of-type {
    border: none;
    margin-left: 0;
  }

  &.login {
    margin: 0 50px;
    color: #0e57d6;
    font-weight: normal;
  }
}

.release {
  background-color: #0e57d6;
  padding: 0 40px;
  height: 62.6px;
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;

  img {
    width: 26px;
    height: 24px;
    margin-left: 20px;
  }
}

.flex-sub {
  flex: 1;
}

.width_1200_top {
  max-width: 1200px;
  // padding: 15px 0;
  margin: 0 auto;
  box-sizing: border-box;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .width_1200_top {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .width_1200_top {
    flex-direction: column;
  }
}
</style>
